import React from 'react';
import {inject, observer} from 'mobx-react';
import { Route, withRouter, Switch } from 'react-router-dom';
import { ListPage , Comment, Reply } from 'weaver-mobile-page';
import { Avatar } from 'weaver-mobile';
import { toJS} from 'mobx';
import MeetingUtil from '../../../util/meetingUtil';
import '../../../style/index';
const Normal = ListPage.Normal; // Normal 为无路由的普通组件

@inject('viewMeetingStore')
@withRouter
@observer
class DiscussView extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
      };
      //打开附件
      window.openMeetingDiscussDoc = (t, showid, meetingid) => {
        if (window.openLink){
          window.openLink(`/spa/document/static4mobile/index.html#/attach/${showid}?meetingid=${meetingid}&fromModule=meeting`)
        }
      }
      window.openMeetingAppLink = (linkType, linkid, meetingid, isPro=false) => {
        if (linkType == 'doc')
          window.openLink(`/spa/document/static4mobile/index.html#/doc/${linkid}?meetingid=${meetingid}`)
        else if (linkType == 'task')
          return;//手机端暂不支持
        else if (linkType == 'crm')
          window.openLink(`/spa/crm/static4mobile/index.html/#/customerCard/${linkid}`)
        else if (linkType == 'workflow')
          window.openLink(`/spa/workflow/static4mobileform/index.html#/req?fromModul=meeting&modulResourceId=${meetingid}&requestid=${linkid}`)
        else if (linkType == 'project')
          return;//手机端暂不支持
        else
          return false
      }
    }

    componentDidMount(){
      const { getExchangeHrmList,meetingId } = this.props.viewMeetingStore;
      getExchangeHrmList({meetingid:meetingId?meetingId:sessionStorage.getItem('meetingId')})
    }

    componentWillReceiveProps(){
    }

    render() {
        const { comment , reply, submitReply, exchangeListStore, replySubmitLoading} = this.props.viewMeetingStore;
        const discussHeight = this.getHeight();
        const leftConfig = [
          { type: 'voice' },
          { type: 'blog-biaoqing' },
          // { type: '@' },
          { type: 'tianjia' },
        ];
        return (
          <div style={{height:'100%'}}>
            <div style={{height:discussHeight}}>
              <Comment
                style={{borderBottom:'1px solid #ddd',height:'100%'}}
                // operateAttachList={(type,data)=>{console.log('type',type);console.log('data',data);}}
                store={comment}
              >
              </Comment>
            </div>
              <Reply
                wrappedComponentRef={ref => this.replyRef = ref}
                store={reply}
                showOutInput={!replySubmitLoading}
                defaultShow={true}
                visible={false}
                leftConfig={leftConfig}
                onSubmit={datas => {this.onSubmit(datas)}}
                renderAt={item => this.renderAt(item)}
              />
            </div>
        )
    }

    onSubmit = (data) => {
      const { submitReply } = this.props.viewMeetingStore;
      submitReply(data);
      this.replyRef.setVisible(false,()=>{})
    }

    renderAt = (item) =>{
      const { exchangeListStore } = this.props.viewMeetingStore;
      let mobileshowtemplate = {};
      mobileshowtemplate = {
        default: [
          {
            key: 'col1',
            style: { flex: 'none' },
            render(a) {
              return <Avatar name={toJS(a).name} url={toJS(a).url} />;
            },
          },
          {
            key: 'col2',
            configs: [
              { key: 'col2-row1', configs: [{ key: 'name' }],style:{color:'#333'} },
              { key: 'col2-row2', configs: [{ key: 'desc' }] },
            ],
          },
        ],
      };
      return(
        <div>
          <div onClick={this.goHrmList}>
          {item}
          </div>
          <ListPage
            showCheck
            isRowClickCheck
            template={mobileshowtemplate}
            store={exchangeListStore}
            buttonGroupData={[{
                key: 'clear',
                text: '取消',
                onClick: () => {this.props.history.go(-1)},
              },
              {
                key: 'submit',
                text: '确定',
                onClick: () => {this.atChange();this.props.history.go(-1)},
                type: 'primary',
              },]}
          >
          </ListPage>
          </div>
      )
    }

    // @ 事件
  atChange = () => {
    const { reply: { setState,atLists } ,exchangeListStore} = this.props.viewMeetingStore;
    const data = exchangeListStore.data;
    const selectedRowKeys = exchangeListStore.selectedRowKeys;
    let datas=[];
    selectedRowKeys&&selectedRowKeys.forEach((id,index)=>{
      data.forEach((element,index)=>{
        if(element.id === id){
          datas.push(element)
        }
      })
    })
    let dataLen = 0;
    setState({ atList: [],
      atLists: [
        ...toJS(atLists),
        ...datas,
      ], });
    if (datas && datas.length > 0) {
      let html = '';
      datas.map((item) => {
        const value = `@${item.name}`;
        // this.replyRef.replyRef.changeTextValue({
        //   id: item.id,
        //   name: item.name,
        // }, 'html', true);
        html += `<a contenteditable="false" atsome="@${item.id}" atsome-uid="${item.id}" atsome-name="${item.name}" target="_blank" style="cursor:pointer;text-decoration:none !important;color:#2777c1!important;" href="javascript:void(0)">${value}</a>&nbsp;`;
      });
      // this.replyRef.replyRef.changeTextValue(html);
    }
  }

    goHrmList = ()=>{
      const { reply,exchangeListStore } = this.props.viewMeetingStore;
      this.props.history.push(exchangeListStore.path)
    }

    getHeight = () => {
      return document.body.clientHeight - MeetingUtil.getTabHeight() -( 35 * MeetingUtil.getBaseHeight());
    }
}

export default DiscussView;